<template>
  <div class="flex flex-col items-center justify-center min-h-screen bg-gray-900">
    <h1 class="text-3xl font-bold text-white mb-8">测试bg-success类</h1>
    
    <!-- 一个简单的绿色方块测试 -->
    <div class="w-40 h-40 bg-success rounded-lg flex items-center justify-center mb-8">
      <span class="text-white text-xl font-bold">成功</span>
    </div>
    
    <!-- 测试文本颜色 -->
    <div class="text-success text-2xl font-bold mb-8">
      这是使用text-success类的文本
    </div>
    
    <!-- 测试边框颜色 -->
    <div class="w-40 h-40 border-4 border-success rounded-lg flex items-center justify-center">
      <span class="text-white">这是使用border-success类的边框</span>
    </div>
    
    <!-- 测试基础Tailwind类 -->
    <div class="w-40 h-40 bg-blue-500 rounded-lg flex items-center justify-center mt-8">
      <span class="text-white">基础蓝色方块</span>
    </div>
  </div>
</template>

<script setup>

</script>

<style scoped>
/* 这个组件不使用scoped样式，而是依赖全局的custom-colors.css */
</style>